<template>
  <div
    class="tab-bar-wrap"
    :style="{
      paddingBottom: safeAreaInsets?.bottom + 'rpx',
    }"
  >
    <view class="tab-bar">
      <div
        v-for="(item, index) in tabList"
        :key="index"
        class="tab-bar-item"
        @click="switchTab(index)"
      >
        <template>
          <image
            v-if="item.isActive"
            class="icon"
            :src="item.iconActive"
          />
          <image
            v-else
            class="icon"
            :src="item.icon"
          />
        </template>
        <text :class="['name', item.isActive && 'active']">
          {{ item.name }}
        </text>
      </div>
      <view class="center-people">
        <image
          class="people-avatar"
          src="@/static/images/ai-people.png"
          @click="chosePeople"
        ></image>
        <view
          class="people-list"
          :class="{ 'people-list-show': showPeopleList }"
        >
          <view
            class="people-item"
            @click="goWeb('nuan')"
          >
            <image
              class="people-item-avatar"
              src="@/static/images/avatar-nuan.png"
            ></image>
            <view class="people-item-name">与暖暖对话</view>
          </view>
          <view
            class="people-item"
            @click="goWeb('cheng')"
          >
            <image
              class="people-item-avatar"
              src="@/static/images/avatar-cheng.png"
            ></image>
            <view class="people-item-name">与城城对话</view>
          </view>
        </view>
      </view>
    </view>
  </div>
</template>

<script setup>
import Home from '@/static/icons/home.png'
import HomeActive from '@/static/icons/homeHL.png'
import My from '@/static/icons/my.png'
import MyActive from '@/static/icons/myHL.png'
import { currRoute, uniNavigateTo } from '@/utils/index'

const { safeAreaInsets } = uni.getSystemInfoSync()

// 添加控制 people-list 显示状态的响应式变量
const showPeopleList = ref(false)

const tabList = ref([
  {
    path: '/pages/index/index',
    name: '首页',
    // icon: '@/static/icons/home.png',
    icon: Home,
    // iconActive: '@/static/icons/home-active.png',
    iconActive: HomeActive,
    isActive: false,
  },
  {
    path: '/pages/my/index',
    name: '我的',
    // icon: '@/static/icons/my.png',
    icon: My,
    // iconActive: '@/static/icons/my-active.png',
    iconActive: MyActive,
    isActive: false,
  },
])

const switchTab = (index) => {
  showPeopleList.value = false
  uni.switchTab({
    url: tabList.value[index].path,
  })
}

const goWeb = (type) => {
  showPeopleList.value = false
  let url = ''
  if (type === 'nuan') {
    url =
      'https://vlog-zhuangyou.shuwen.com/shuyou/app/bot?type=single&disableTabBar=1&mentorId=187'
  } else {
    url =
      'https://vlog-zhuangyou.shuwen.com/shuyou/app/bot?type=single&disableTabBar=1&mentorId=449'
  }
  const u = encodeURIComponent(url)
  uniNavigateTo(`/pages-sub/web/index?url=${u}`)
}

// 修改 chosePeople 函数，添加切换显示状态的逻辑
const chosePeople = () => {
  showPeopleList.value = !showPeopleList.value
}

const handleClickOutside = () => {
  showPeopleList.value = false
}

onMounted(() => {
  uni.$on('tabbarClick', handleClickOutside)
})

onBeforeUnmount(() => {
  handleClickOutside()
  uni.$off('tabbarClick', handleClickOutside)
})

onLoad(() => {
  const { path } = currRoute()
  tabList.value.forEach((item) => {
    if (item.path === path) {
      item.isActive = true
    }
  })
})
</script>

<style lang="scss" scoped>
.tab-bar-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
}

.tab-bar {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 104rpx;
  padding: 0 100rpx;
  background: #fff;

  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .icon {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 8rpx;
    }

    .name {
      font-size: 24rpx;
      font-weight: 500;
      color: $uni-text-color-grey;

      &.active {
        color: $uni-text-color;
      }
    }
  }
}

.center-people {
  position: absolute;
  top: -50rpx;
  left: 50%;
  width: 100rpx;
  height: 100rpx;
  background: #fff;
  border: 8rpx solid #fff;
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 999;

  .people-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .people-list {
    position: absolute;
    bottom: 80rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 280rpx;
    padding: 20rpx;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    transform-origin: bottom center;
    transform: translateX(-50%) scale(0.8);

    &.people-list-show {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) scale(1);
    }

    .people-item {
      display: flex;
      align-items: center;
      padding: 0 12rpx;
      height: 96rpx;
      margin-bottom: 16rpx;
      background: #fff;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
      border-radius: 48rpx;

      .people-item-avatar {
        width: 72rpx;
        height: 72rpx;
        border-radius: 50%;
        margin-right: 16rpx;
      }

      .people-item-name {
        font-size: 28rpx;
        color: $uni-text-color;
      }
    }
  }
}
</style>
